<template>
  <header class="blog-header py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
      <span class="text-muted pl-3" style="cursor: pointer;" @click="$router.push({name: 'blog'})">个人博客</span>
      <div class="col d-flex justify-content-end align-items-center header-search"  :class="{'show':show}" >
        <i class="el-icon-search text-muted" style="font-size: 20px;" @click.stop="click"></i>
        <el-input v-model="search" placeholder="请输入内容" @keyup.enter.native="searchKey"
          ref="headerSearchSelect" class="header-search-select">
        </el-input>
      </div>
    </div>
  </header>
</template>
<script>
export default {
  name: 'blog-header',
  title: '博客顶部',
  data() {
    return {
      search: '',
      show: false,
    }
  },
  created() {
    const { search } = this.$route.query
    if (search) {
      this.show = true
      this.search = search
    }
  },
  methods: {
    click() {
      if (this.show && this.search) {
        // 如果有查询内容则查询
        this.searchKey()
        return
      }
      this.show = !this.show
      if (this.show) {
        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
      }
    },
    close() {
      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
      // this.options = []
      if (!this.search) {
        this.show = false
      }
    },
    searchKey() {
      const { search } = this
      const urlSearch = this.$route.query.search
      if (search && urlSearch !== search) {
        this.$router.push({query: {search: this.search}})
        return
      } else if (!search && !!urlSearch) {
        this.$router.push({query: {}})
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.header-search {
  font-size: 0 !important;

  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }

  .header-search-select {
    font-size: 18px;
    transition: width 0.2s;
    width: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;

    /deep/ .el-input__inner {
      border-radius: 0;
      border: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none !important;
      border-bottom: 1px solid #d9d9d9;
      vertical-align: middle;
    }
  }

  &.show {
    .header-search-select {
      width: 210px;
      margin-left: 10px;
    }
  }
}
</style>